<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<title>"猴兆吉祥"新春贺卡</title>
		<link rel="stylesheet" href="css/pro-bars.min.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/base.css" />
	</head>

	<body>
		<img src="image/logo3.png" style="position:fixed;left:0;top:0;opacity:0;z-index:-3;" />
		<!--<img id="loading" src="images/loading.gif" style="width:74px;height:94px;position:fixed;top:50%;left:50%;margin:-47px 0 0 -37px;z-index:-1;" />-->
		<div class="loading-bar">
			<div class="pro-bar-container color-nephriti">
				<div id="my_bar" class="pro-bar color-orange" data-pro-bar-percent="0" data-pro-bar-delay="100">
					<div class="pro-bar-candy"></div>
				</div>
			</div>
			<p class="load"></p>
		</div>

		<div id="bodyBlock" class="bodyBlock" style="opacity: 0;">
			<div class="bgMusic" onclick="playOrPaused(this);" id="bgMusicBlock">
				<img src="images/bgMusic.png" class="bgMusic-img" />
				<!--<audio src="other/music.mp3" loop autoplay="autoplay" id="bgMusicActionStop"></audio>-->
				<audio src="other/music3.mp3" loop id="bgMusicActionStop"></audio>
			</div>
			<img src="images/music.gif" class="music-bg" />
			<!--音乐向外扩张的图片-->
			<!--end bgMusic-->
			<!--data-slide-out="at 1000 to fadeOutHalfDown use swing during 2000 force"-->

			<div class="swiper-container swiper-container-vertical">
				<div class="swiper-wrapper" style="transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px);">

					<!-------------slide1----------------->
					<section class="swiper-slide swiper-slide1" style="height: 480px; opacity: 1; transform: translate3d(0px, 0px, 0px) scaleY(1); -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); transition-duration: 0ms; -webkit-transition-duration: 0ms;">
						<canvas id="canvas" class="yanhuacanvas">Canvas is not supported in your browser.</canvas>
						<img src="image/monkey.png" class="ani resize rollIn" id="monkey" style="width: 150px;  left: 85px; bottom: 10px; z-index: 5; visibility: visible;" data-slide-in="at 100 from rollIn use flash during 1000" data-slide-out="at 10 to fadeOutHalfRight use swing during 1000 force">
						<img src="image/redword1.png" class="ani resize fadeIn" style="width: 320px; height: 620px; left: 0px; bottom: 0px; z-index: 2; visibility: visible;" data-slide-in="" data-slide-out="at 200 to fadeOutHalfDown use swing during 1000 force">
						<img src="image/background2.png" class="ani resize" style="width: 320px; height:480px;left: 0px; bottom: 0px; z-index: 3; visibility: visible;" data-slide-in="" data-slide-out="">
						<img src="image/background.jpg" class="ani resize" style="width: 320px; height:480px;left: 0px; bottom: 0px; z-index: 1; visibility: visible;" data-slide-in="" data-slide-out="">
						<img src="image/sz.png" class="ani resize" style="width: 200px;  left: 60px; bottom: 0px; z-index: 3; visibility: visible;" data-slide-in="" data-slide-out="">
						<img src="image/p1_2016.png" class="ani resize fadeIn" style="width: 120px;  left: 100px; top: 105px; z-index: 4; visibility: visible;" data-slide-in="at 2000 from fadeIn use swing during 2000" data-slide-out="">
						<img src="image/newyearscript.png" class="ani resize fadeIn" style="width: 280px; left: 20px; top: 105px; z-index: 4; visibility: visible;" data-slide-in="at 2500 from fadeIn use swing during 2000" data-slide-out="">
					</section>
					<!---------------slide2-------------->
					<section class="swiper-slide swiper-slide2 slide-v2" style="height: 480px; opacity: 1; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scaleY(1); -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);">
						<img src="image/p3_jz.png" class="ani resize" style="width: 240px; left: 40px; top: 30px; z-index: 2; visibility: hidden;" data-slide-in="at 500 from fadeInDown use swing during 1000" data-slide-out="">
						<img src="image/p3_dl.png" class="ani resize fadeInDown" style="width: 100px;  left: 120px; top: 0px; z-index: 4; visibility: hidden;" data-slide-in="at 500 from fadeInDown use swing during 1000" data-slide-out="at 100 to myswing use swing during 30000 force">
						<img src="image/slid2_v1_2.png" class="ani resize" style="width: 28px; left: 205px; top: 135px;z-index: 3; visibility: hidden;" data-slide-in="at 1000 from zoomIn use swing during 1000" data-slide-out="">
						<img src="image/slid2_v1_1.png" class="ani resize" style="width: 92px; left: 84px; top: 145px; z-index: 3; visibility: hidden;" data-slide-in="at 2000 from zoomIn use swing during 1000" data-slide-out="">
					</section>

					<!-------------slide3----------------->
					<section class="swiper-slide swiper-slide3" style="height: 480px; opacity: 1; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scaleY(1); -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);">
						<img src="image/p5_sun.png" class="ani resize " style="width: 280px;  left: 20px; top: 25px; z-index: 2; visibility: hidden;" data-slide-in="at 10 from zoomIn use swing during 2000" data-slide-out="">
						<img src="image/p5_hany.png" class="ani resize " style="width: 50px; left: 130px; top: 87px; z-index: 3; visibility: hidden;" data-slide-in="at 2000 from zoomIn use swing during 1000" data-slide-out="">
						<img src="image/p5_dl1.png" class="ani resize " style="width: 50px;  top: 200px; z-index: 4; visibility: hidden;" data-slide-in="at 3000 from slideInRightBigDL1 use swing during 4000" data-slide-out="">
						<img src="image/p5_dl2.png" class="ani resize " style="width: 61px; top: 130px; z-index: 4; visibility: hidden;" data-slide-in="at 3500 from slideInRightBigDL2 use swing during 2000" data-slide-out="">
						<a href="index0.html"><img src="image/back_bg.png" class="ani resize " style="width: 120px;  left: 100px; bottom: 100px; z-index: 2; visibility: hidden;" data-slide-in="" data-slide-out=""></a>
						<img src="image/luokaun.png" class="ani resize " style="width: 160px;  left: 80px; bottom: 10px; z-index: 2; visibility: hidden;" data-slide-in="" data-slide-out="">
						<div class="showinput" id="showinput"></div>
						<div class="inputbox" id="inputbox">
							<input class="inputtext" type="text" name="" id="inputtext" maxlength="20" placeholder="请输入祝福语..." />
							<!--<textarea class="inputtext" type="text" name="" id="inputtext" value="" cols="14" rows="1" wrap="virtual"></textarea>-->
							<div class="btn-box">
								<div id="zxyh" class="zxyh">再看看，一会写</div>
								<div id="xhl" class="xhl">写好了，发送</div>
							</div>
						</div>
						<div id="content" class="content">

						</div>
					</section>
				</div>
				<img src="images/arrow.png" style="width: 30px; height: 20px; top: 440px; left: 145px; display: none;" id="array" class="resize">
				<img src="images/arrow2.png" style="width: 30px; top: 420px; left: 145px; " id="array2" class="resize">
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="js/pro-bars.min.js"></script>
		<script type="text/javascript" src="js/imgload3.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/swiper.animate.min.js"></script>
		<script src="js/swiper.animate-twice.min.js"></script>
		<script type="text/javascript" src="js/autoBrowser.js"></script>
		<script type="text/javascript" src="js/yanhua.js"></script>
		<script type="text/javascript" src="js/music.base.js"></script>
		<script type="text/javascript" src="js/base3.js"></script>
		<script type="text/javascript" src="js/Share.js" ></script>
		<script>
			loadimg();
		</script>
	</body>

</html>